import { useEffect } from "react";
import "./MutationObserverTest.scss";

export function MutationObserverTest2() {
  useEffect(() => {
    const box = document.getElementById('box')
    setTimeout(() => {
      box.style.background = "red";
    }, 2000);

    setTimeout(() => {
      const dom = document.createElement("button");
      dom.textContent = "东东东";
      box.appendChild(dom);
    }, 3000);

    setTimeout(() => {
      document.querySelectorAll("button")[0].remove();
    }, 5000);

    const mutationObserver = new MutationObserver((mutationsList) => {
      console.log(mutationsList);
    });

    mutationObserver.observe(box, {
      attributes: true,
      childList: true,
    });

    return () => {};
  }, []);
  return (
    <>
      <div id="box">
        <button>光</button>
      </div>
    </>
  );
}
